<template>
    <el-col class="col-layout" :span="setAttr('spanNum', 12)" >
        <slot></slot>
    </el-col>
</template>

<script>
import { ref, toRef } from 'vue'
import yunApi from 'static/js/toolApi.js'
export default {
    name: 'Row',
	props: {
		item: {
			type: Object,
			default: function() {
				return {}
			}
		}
	},
	emits: ['update:item'],
	setup(props) {
		const dataAttr = ref({

		})
        let item = toRef(props, 'item')
        function setAttr(name, value = '') {
            return Object.prototype.hasOwnProperty.call(item.value.attribute, name) ? item.value.attribute[name].value : value
        }
		return {
			dataAttr,
            setAttr
		}
	},
	watch: {
		// 监听父组件数据，创建副本
		item: {
			handler(v) {
				this.dataAttr.itemCopy = JSON.parse(JSON.stringify(v))
			},
			deep: true,
			immediate: true
		},
		// 监听属性变化，然后重新修改组件的属性
		'dataAttr.itemCopy.attribute': {
			handler(v) {
				console.log('vvv', v)
				this.init()
			},
			deep: true
		},
		// 监听item复制对象，然后v-model修改父组件数据
		'dataAttr.itemCopy': {
			handler(v) {
				this.$emit('update:item', v)
			},
			deep: true
		},
	},
	methods: {
		init() {
		}
	},
	created() {
		this.init()
	}
}
</script>

<style scoped lang="less">
	.col-layout {
        float: unset;
    }
</style>
